<!--
 * @Descripttion:
 * @version: v1
 * @Author: youhujun 2900976495@qq.com
 * @Date: 2024-08-17 09:59:08
 * @LastEditors: youhujun 2900976495@qq.com
 * @LastEditTime: 2025-04-09 10:37:53
 * @FilePath: \src\pages\youhu-shop\v1\goods\goodsGroup\goodsList\addGoods\index.vue
-->
<template>
  <div class="container_box">
    <Card>
      <template #cardTitle>
        新增商品
      </template>
      <template #cardNotice>
        <el-tag size="mini" type="danger" effect="plain">1商品分佣设置过低,审核时无法通过审核 2库存为0后,自动下架 3部分必填项请根据错误提示填写</el-tag>
      </template>
      <template #cardButton>
        <!--  <el-button style="float: right; " type="primary" round @click="handleToAddGoods()">添加产品</el-button> -->
      </template>
      <template #cardContent>
        <div class="custom-node">
          <el-form
            ref="addGoodsForm"
            :model="addGoodsForm"
            :rules="addGoodsRules"
            label-width="100px"
            :inline="true"
            label-position="left"
            status-icon
            inline-message
            style="width:98%;margin-left:auto;margin-right: auto;padding:10px 10px;"
          >
            <!--  产品类型 -->
            <el-row type="flex">
              <el-col :span="24">
                <el-form-item label="商品类型" prop="goods_type">
                  <el-select v-model="addGoodsForm.goods_type" placeholder="请选择">
                    <el-option
                      v-for="item in goods_type_options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                      <span style="float: left">{{ item.label }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-tag type="info" style="margin-left:1rem;">默认是实体类型</el-tag>
              </el-col>
            </el-row>
            <!--  产品分类 -->
            <el-row type="flex">
              <el-col :span="24">
                <el-form-item label="商品分类" prop="goods_class_id">
                  <SelectGoodsClass :goods-class.sync="addGoodsForm.goodsClassArray" />
                </el-form-item>
                <el-tag type="danger" style="margin-left:1rem;">必须先选择商品分类才能继续编辑产品</el-tag>
              </el-col>
            </el-row>
            <!-- 商品分类控制盒子 -->
            <template v-if="addGoodsForm.goods_class_id">
              <!-- 商品标题 -->
              <el-row type="flex">
                <el-col :span="24">
                  <div class="title">
                    <el-form-item label="商品标题" prop="goods_name">
                      <el-input v-model="addGoodsForm.goods_name" maxlength="30" show-word-limit />
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <!-- 商品spu -->
              <el-row type="flex">
                <el-col :span="24">
                  <div class="title">
                    <el-form-item label="商品spu" prop="goods_spu">
                      <el-input v-model="addGoodsForm.goods_spu" maxlength="30" show-word-limit />
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <!-- 商品简介 -->
              <el-row type="flex">
                <el-col :span="24">
                  <div class="title">
                    <el-form-item label="商品简介" prop="goods_introduction">
                      <el-input
                        v-model="addGoodsForm.goods_introduction"
                        type="textarea"
                        :rows="1"
                        :autosize="{ minRows: 2, maxRows: 6 }"
                        placeholder="请输入内容"
                        maxlength="50"
                        show-word-limit
                        class="info"
                      />
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <!-- 商品品牌 -->
              <el-row type="flex">
                <!-- 商品品牌 -->
                <el-col :span="24">
                  <el-form-item label="商品品牌" prop="goods_brand_id">
                    <SelectGoodsBrand :goods-brand-id.sync="addGoodsForm.goods_brand_id" />
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 商品主图 -->
              <el-row type="flex">
                <el-col :span="24">
                  <div class="title">
                    <el-form-item label="商品主图" prop="goods_main_picture_id">
                      <UploadPicture :limit-number="3" :picture-id.sync="addGoodsForm.goods_main_picture_id" show-content="上传主图" :upload-data="{id:0, use_type:20, file_type: '', save_path: 'picture'}" />
                    </el-form-item>
                  </div>
                </el-col>
                <el-tag type="info" style="margin-left:1rem;">1-3张</el-tag>
              </el-row>

              <!-- 商品编码和条件码 -->
              <el-row type="flex">
                <el-col :span="12">
                  <div class="title">
                    <el-form-item label="商品编码" prop="goods_code">
                      <el-input v-model="addGoodsForm.goods_code" />
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="title">
                    <el-form-item label="商品条形码" prop="goods_line_code">
                      <el-input v-model="addGoodsForm.goods_line_code" />
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <!-- 商品售价和成本价 -->
              <el-row type="flex">
                <el-col :span="12">
                  <el-form-item label="售价" prop="sale_price">
                    <el-input v-model="addGoodsForm.sale_price" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="市场价" prop="market_price">
                    <el-input v-model="addGoodsForm.market_price" />
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 商品成本价 -->
              <el-row type="flex">
                <el-col :span="24">
                  <el-form-item label="成本价" prop="cost_price">
                    <el-input v-model="addGoodsForm.cost_price" />
                  </el-form-item>
                  <el-tag type="danger" style="margin-left:1rem;">如不填成本价,佣金按照售价20%扣除</el-tag>
                </el-col>
              </el-row>
              <!-- 商品售价和成本价 -->
              <el-row type="flex">
                <el-col :span="12">
                  <el-form-item label="游鹄币" prop="coin">
                    <el-input v-model="addGoodsForm.coin" />
                  </el-form-item>
                  <el-tag type="info" style="margin-left:1rem;">设置后,该商品可用游鹄币全额支付</el-tag>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="抵扣游鹄币" prop="deduct_coin">
                    <el-input v-model="addGoodsForm.deduct_coin" />
                  </el-form-item>
                  <el-tag type="info" style="margin-left:1rem;">设置后,可用于抵扣部分支付金额</el-tag>
                </el-col>
              </el-row>
              <!-- 分润类型和分润 -->
              <el-row type="flex">
                <el-col :span="12">
                  <el-form-item label="分佣类型" prop="share_benefit_type">
                    <el-select v-model="addGoodsForm.share_benefit_type" placeholder="请选择">
                      <el-option label="按固定金额" :value="10" />
                      <el-option label="按照售价比例" :value="20" />
                    </el-select>
                  </el-form-item>
                  <el-tag type="info" style="margin-left:1rem;">无论选择何种方式,都会自动计算相应金额或者比例</el-tag>
                </el-col>
                <el-col v-if="addGoodsForm.share_benefit_type == 10" :span="12">
                  <el-form-item label="固定金额" prop="share_benefit_money">
                    <el-input v-model="addGoodsForm.share_benefit_money" />
                  </el-form-item>
                  <el-tag type="info" style="margin-left:1rem;">单位:元</el-tag>
                </el-col>
                <el-col v-if="addGoodsForm.share_benefit_type == 20" :span="12">
                  <el-form-item label="售价比例" prop="share_benefit_rate">
                    <el-input v-model="addGoodsForm.share_benefit_rate" />
                  </el-form-item>
                  <el-tag type="info" style="margin-left:1rem;">%</el-tag>
                </el-col>
              </el-row>
              <!-- 库存和预警库存 -->
              <el-row type="flex">
                <el-col :span="12">
                  <el-form-item label="库存" prop="store_number">
                    <el-input v-model="addGoodsForm.store_number" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="预警库存" prop="store_warning_number">
                    <el-input v-model="addGoodsForm.store_warning_number" />
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 上架时间 -->
              <el-row type="flex">
                <el-col :span="24">
                  <el-form-item label="上架时间" prop="on_sale_at">
                    <FutureTimeSelect :time.sync="addGoodsForm.on_sale_at" />
                  </el-form-item>
                  <el-tag type="info" style="margin-left:1rem;">如果不设置,审核通过后立即上架</el-tag>
                </el-col>
              </el-row>
              <!-- 商品sku -->
              <el-row v-if="addGoodsForm.goods_class_id" type="flex">
                <el-col :span="24">
                  <el-form-item label="规格配置" prop="goods_sku_array">
                    <GoodsSpec
                      :goods.sync="addGoodsForm"
                      :system-spec-name-array.sync="addGoodsForm.system_spec_name_array"
                      :custom-spec-name-array.sync="addGoodsForm.custom_spec_name_array"
                      :goods-sku-array.sync="addGoodsForm.goods_sku_array"
                      :goods-class-id="addGoodsForm.goods_class_id"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 商品属性 -->
              <el-row v-if="addGoodsForm.goods_class_id" type="flex">
                <el-col :span="24">
                  <el-form-item label="商品属性" prop="goods_sku">
                    <GoodsAttribute
                      :system-attribute-name-array.sync="addGoodsForm.system_attribute_name_array"
                      :custom-attribute-name-array.sync="addGoodsForm.custom_attribute_name_array"
                      :goods-class-id="addGoodsForm.goods_class_id"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 服务区域-->
              <el-row type="flex">
                <el-col :span="24">
                  <el-form-item label="服务区域类型" prop="serve_region_type">
                    <el-select v-model="addGoodsForm.serve_region_type" disabled placeholder="请选择">
                      <el-option label="全国" :value="10" />
                      <el-option label="地区" :value="20" />
                    </el-select>
                  </el-form-item>
                  <el-tag type="info" style="margin-left:1rem;">暂不支持地区设置,后续开放</el-tag>
                </el-col>
              </el-row>
              <el-row v-if="addGoodsForm.serve_region_type === 20" type="flex">
                <!-- 商品服务地区不为全国选择 -->
                <el-col :span="24">
                  <el-form-item label="服务的地区" prop="serve_region_array">
                    <SelectMultipleRegion :region.sync="addGoodsForm.serve_region_array" />
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 服务区域-->
              <el-row type="flex">
                <el-col :span="24">
                  <el-form-item label="邮费设置" prop="expense_type">
                    <el-select v-model="addGoodsForm.expense_type" disabled placeholder="请选择">
                      <el-option label="包邮" :value="10" />
                      <el-option label="固定邮费" :value="20" />
                      <el-option label="按区域" :value="30" />
                    </el-select>
                  </el-form-item>
                  <el-tag type="info" style="margin-left:1rem;">暂不支持邮费设置,后续开放</el-tag>
                </el-col>
              </el-row>
              <!-- 服务区域-->
              <el-row type="flex">
                <el-col :span="24">
                  <el-form-item label="发货地区类型" prop="send_region_type">
                    <el-select v-model="addGoodsForm.send_region_type" disabled placeholder="请选择">
                      <el-option label="单独填写" :value="10" />
                      <el-option label="地址模版" :value="20" />
                    </el-select>
                  </el-form-item>
                  <el-tag type="info" style="margin-left:1rem;">暂不支持选择发货地区类型,后续开放</el-tag>
                </el-col>
              </el-row>
              <!-- 发货地-->
              <el-row v-if="addGoodsForm.send_region_type === 10" type="flex">
                <el-col :span="24">
                  <el-form-item label="发货地区" prop="send_region_array">
                    <SelectSingleRegion :region.sync="addGoodsForm.send_region_array" />
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 发货地详情-->
              <el-row v-if="addGoodsForm.send_region_type === 10" type="flex">
                <el-col :span="12">
                  <div class="title">
                    <el-form-item label="地址详情" prop="send_address_info">
                      <el-input v-model="addGoodsForm.send_address_info" />
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <!-- 详情-->
              <el-row type="flex" justify="center">
                <el-col :span="24" :offset="0">
                  <el-form-item prop="goods_description" style="width:100%;" class="editor">
                    <TEditor v-if="editorIsShow" :value.sync="addGoodsForm.goods_description" @handleChange="changeValue" />
                  </el-form-item>
                </el-col>
              </el-row>
            </template>
            <!-- 商品分类控制盒子 结束-->
            <el-row type="flex" justify="center">
              <el-col :span="12" :offset="4">
                <el-form-item>
                  <el-button type="primary" @click="submitForm('addGoodsForm')">提交审核</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="4">
                <el-form-item>
                  <el-button @click="resetForm('addGoodsForm')">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </template>
    </Card>
    <!-- 弹框开始 -->
    <Dialog :dialog-visible.sync="dialogVisible" :dialog-title="dialogTitle" :dialog-type="dialogType" :dialog-width="dialogWidth">
      <template #addForm>
        <!-- <AddRoleForm :new-add-role-from="newAddRoleFrom" :role-array.sync=" roleArray" /> -->
      </template>
      <template #updateForm>
        <!--  <UpdateRoleForm :before-role-form="beforeRoleForm" :role-array.sync=" roleArray" /> -->
      </template>
    </Dialog>
  </div>
</template>
<script>
import Card from '@/pages/component/laravel-fast-api/v1/card'
import Dialog from '@/pages/component/laravel-fast-api/v1/dialog'
import TEditor from '@/pages/component/laravel-fast-api/v1/editor'
import UploadPicture from '@/pages/component/laravel-fast-api/v1/upload/uploadPicture'

import { debounce } from '@/utils'
import { isArray } from '@/utils/validate'

import SelectGoodsClass from '@/pages/component/youhu-shop/v1/select/goods/selectGoodsClass'
import SelectGoodsBrand from '@/pages/component/youhu-shop/v1/select/goods/selectGoodsBrand'
import SelectMultipleRegion from '@/pages/component/youhu-shop/v1/select/region/selectMultipleRegion'
import SelectSingleRegion from '@/pages/component/youhu-shop/v1/select/region/selectSingleRegion'

import FutureTimeSelect from '@/pages/component/youhu-shop/v1/select/time/futureTimeSelect'

import GoodsSpec from './goodsSpec'
import GoodsAttribute from './goodsAttribute'

import { addGoods } from '@/api/youhu-shop/V1/goods/goods'

export default
{
  // 组件名称
  name: 'UserLevel',
  // 组件
  components:
  {
    Card,
    Dialog,
    SelectGoodsClass,
    SelectGoodsBrand,
    SelectMultipleRegion,
    SelectSingleRegion,
    UploadPicture,
    FutureTimeSelect,
    GoodsSpec,
    GoodsAttribute,
    TEditor
  },
  props:
  {
  },
  // 数据
  data()
  {
    return {
      // 弹窗控制
      dialogVisible: false,
      dialogWidth: '60%',
      dialogTitle: '添加弹窗',
      // 表单类型 1添加表单 2更新表单
      dialogType: 1,

      // 添加菜单表单
      addGoodsForm: {
        id: 0,
        // 产品类型 10实体 20服务 30虚拟
        goods_type: 10,
        // 产品分类id
        goods_class_id: null,
        goodsClassArray: [],
        // 商品标题
        goods_name: '',
        // 商品spu
        goods_spu: '',
        // 商品简介
        goods_introduction: '',
        // 产品 品牌id
        goods_brand_id: null,
        // 商品主图id 可能是数组也可能是单个id
        goods_main_picture_id: null,
        // 产品编码
        goods_code: '',
        // 商品条形码
        goods_line_code: '',
        // 售价
        sale_price: null,
        // 市场价
        market_price: null,
        // 成本价
        cost_price: null,
        // 系统币
        coin: null,
        // 抵扣的系统币
        deduct_coin: null,
        // 分润类型
        share_benefit_type: 10,
        // 分润奖金金额
        share_benefit_money: null,
        // 分润奖金比例
        share_benefit_rate: null,
        // 库存数量
        store_number: null,
        // 预警库存数量
        store_warning_number: null,
        // 上架时间
        on_sale_at: null,
        // 商品的系统规格名列表(包含规格值)
        system_spec_name_array: [],
        // 商品的自定义规格名列表(包含规格值)
        custom_spec_name_array: [],
        // 商品 sku
        goods_sku_array: [],
        // 商品的系统属性名列表(包含规格值)
        system_attribute_name_array: [],
        // 商品的自定义属性名列表(包含规格值)
        custom_attribute_name_array: [],
        // 服务区域类型 10全国 20地区
        serve_region_type: 10,
        // 服务的地区
        serve_region_array: [],
        // 邮费|路费类型
        expense_type: 10,
        // 邮费按区域设置
        expense_region_array: [],
        // 发货地类型
        send_region_type: 10,
        // 单个发货地地区
        send_region_array: [],
        // 发货地址详情
        send_address_info: '',
        // 商品详情
        goods_description: null,
        // 排序
        sort: 100

      },
      // 添加表单规则
      addGoodsRules: {
        goods_type: [
          { required: true, message: '必须有产品类型', trigger: 'blur' },
          { pattern: /^[0-9]+$/, message: '只能是0-9数字', trigger: 'blur' }
        ],
        goods_class_id: [
          { required: true, message: '必须有产品分类', trigger: 'blur' }
        ],
        goods_name: [
          { required: true, message: '必须有商品标题', trigger: 'blur' }
        ],
        goods_main_picture_id: [
          { required: true, message: '必须有商品主图', trigger: 'blur' }
        ],
        sale_price: [
          { required: true, message: '必须有售价', trigger: 'blur' }
        ],
        share_benefit_type: [
          { required: true, message: '必须有售价', trigger: 'blur' }
        ],
        store_number: [
          { required: true, message: '必须有库存', trigger: 'blur' }
        ],

        sort: [
          { pattern: /^[0-9]+$/, message: '只能是0-9数字', trigger: 'blur' }
        ]
      },
      // 产品类型选项
      goods_type_options: [
        { label: '实体', value: 10 },
        { label: '服务', value: 20 },
        { label: '虚拟', value: 30 }
      ],
      // 控制富文本编辑器显示
      editorIsShow: true

    }
  },
  // 计算属性
  computed:
  {
  },
  // 监听
  watch:
  {
    // 监听选择产品分类
    'addGoodsForm.goodsClassArray': {
      handler(value)
      {
        // console.log(value)
        if (isArray(value) && value.length === 3)
        {
          this.addGoodsForm.goods_class_id = value[2]

          this.addGoodsForm.goods_description = ''

          // console.log(this.addGoodsForm.goods_class_id)
        }
        else
        {
          this.addGoodsForm.goods_class_id = null
        }
      },
      deep: true,
      immediate: true
    },
    // 商品标题
    'addGoodsForm.goods_name': {
      handler(value)
      {
        this.addGoodsForm.goods_spu = this.addGoodsForm.goods_name
      },
      deep: true,
      immediate: true
    }
  },
  // 实例创建之前
  beforeCreate()
  {
  },
  // 创建
  created()
  {
  },
  // 挂载之前
  beforeMount()
  {
  },
  // 挂载 --常用
  mounted()
  {

  },
  // 更新之前
  beforeUpdate()
  {
  },
  // 跟新后
  updated()
  {
  },
  // 销毁之前
  beforeDestroy()
  {
  },
  // 销毁后
  destroyed()
  {
  },
  // 方法
  methods:
  {
    // 产品详情
    changeValue(data)
    {
      this.addGoodsForm.goods_description = data
    },
    // 提交表单
    submitForm: debounce(function(formName)
    {
      const _this = this
      this.$refs[formName].validate((valid) =>
      {
        if (valid)
        {
          // console.log(this.addGoodsForm)

          addGoods(this.addGoodsForm).then(res =>
          {
            if (res && res.code === 0)
            {
              _this.$message(
                {
                  message: res.msg,
                  type: 'success'
                })
              _this.initGoodsFrom()
            }
          })

          // _this.initGoodsFrom()
        /*   _this.editorIsShow = false
          _this.$nextTick(function()
          {
            _this.editorIsShow = true
          }) */
        }
        else
        {
          console.log('未通过验证!')
          return false
        }
      })
    }, 600),

    // 重置表单
    resetForm(formName)
    {
      this.initGoodsFrom()
    },
    // 初始化表单
    initGoodsFrom()
    {
      this.addGoodsForm.id = 0
      this.addGoodsForm.goods_type = 10
      this.addGoodsForm.goods_class_id = null
      this.addGoodsForm.goodsClassArray = []
      this.addGoodsForm.goods_name = null
      this.addGoodsForm.goods_spu = null
      this.addGoodsForm.goods_introduction = null
      this.addGoodsForm.goods_brand_id = null
      this.addGoodsForm.goods_main_picture_id = []
      this.addGoodsForm.goods_code = null
      this.addGoodsForm.goods_line_code = null
      this.addGoodsForm.sale_price = null
      this.addGoodsForm.market_price = null
      this.addGoodsForm.cost_price = null
      this.addGoodsForm.coin = null
      this.addGoodsForm.deduct_coin = null
      this.addGoodsForm.share_benefit_type = 10
      this.addGoodsForm.share_benefit_money = null
      this.addGoodsForm.share_benefit_rate = null
      this.addGoodsForm.store_number = null
      this.addGoodsForm.store_warning_number = null
      this.addGoodsForm.on_sale_at = null
      this.addGoodsForm.system_spec_name_array = null
      this.addGoodsForm.custom_spec_name_array = null
      this.addGoodsForm.goods_sku_array = null
      this.addGoodsForm.system_attribute_name_array = null
      this.addGoodsForm.custom_attribute_name_array = null
      this.addGoodsForm.serve_region_type = 10
      this.addGoodsForm.serve_region_array = []
      this.addGoodsForm.expense_type = 10
      this.addGoodsForm.expense_region_array = []
      this.addGoodsForm.send_region_type = 10
      this.addGoodsForm.send_region_array = []
      this.addGoodsForm.send_address_info = null
      // this.addGoodsForm.goods_description = null
      this.addGoodsForm.sort = 100
    }
  }

}
</script>
<style lang='scss' scoped>
.container_box{
  width: auto;
  max-width: 100wh;
}
.custom-node{
  width: 100%;
  min-height: 100vh;
  overflow-y: auto;

}
.center{
    text-align: center;
 }
 /**表单 */
.title::v-deep .el-form-item{
  width:80%
}

.title::v-deep .el-form-item__content{
  width:80%
}
 .content::v-deep .el-form-item__label{
   width:100px;
 }

 .editor::v-deep .el-form-item__content
 {
    width: 100%;
 }
 .info{
   width: 80%;
 }
</style>
